<!DOCTYPE html>
<html lang="en">
	<head>
		<title>StoryMapJS Embed</title>
		<meta charset="utf-8">
		<meta name="description" content="StoryMapJS Embed">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-touch-fullscreen" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
		<!-- build:css ../css/storymap.css -->
		<link rel="stylesheet" href="/build/css/storymap.css">
		<!-- endbuild -->
		<!-- build:js ../js/storymap-min.js -->
		<script type="text/javascript" src="/build/js/storymap.js"></script>
		<!-- endbuild -->
		<!-- build:js ../js/json2.min.js -->
		<script type="text/javascript" src="/build/js/json2.min.js"></script>
		<!-- endbuild -->
		<style>
			html, body {
			    width: 100%;
			    height: 100%;
			    padding: 0;
			    margin: 0;
			}
			#storymap-embed {
				/*border: 1px solid #999;*/
			}
		</style>
		<!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	</head>
	<body>
		<div id="storymap-embed"></div>
		<!-- Global site tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-27829802-2"></script>
		<script>
		  window.dataLayer = window.dataLayer || [];
		  function gtag(){dataLayer.push(arguments);}
		  gtag('js', new Date());

		  gtag('config', 'UA-27829802-2',
				{
					'anonymize_ip': true,
					'linker': {
					    'domains': ['knightlab.com']
					  }
				});

			gtag('event', 'EmbeddedIn', {
			  'event_label': document.referrer,
			  'event_category': 'StoryMapJS',
			  'non_interaction': true
			});
		</script>

		<script type="text/javascript">

		function parseQuerystring() {
		    var nvpair = {};
		    var qs = window.location.search.replace('?', '');
		    var pairs = qs.split('&');

		    for(var i = 0; i < pairs.length; i++) {
		        var p = pairs[i].split('=');
		        nvpair[p[0]] = p[1];
		    }
		    return nvpair;
		}

		function getScriptPath(scriptname) {
		    var scriptTags = document.getElementsByTagName('script');

			for(var i = 0; i < scriptTags.length; i++) {
		        if(scriptTags[i].src.match(scriptname)) {
		            script_path = scriptTags[i].src;
		            return script_path.split('?')[0].split('/').slice(0, -1).join('/');
		        }
			}
			return '';
		}

		function url_join(url, concat) { // see http://stackoverflow.com/questions/2676178/joining-relative-urls
		    function build(parts,container) {
		        for (var i = 0, l = parts.length; i < l; i ++) {
		            if (parts[i] == '..') {
		                container.pop();
		            } else if (parts[i] == '.') {
		                continue;
		            } else {
		                container.push(parts[i]);
		            }
		        }
		    }
		    var url_parts = [ ];
		    build(url.split('/'),url_parts);
		    build(concat.split('/'),url_parts);
		    return url_parts.join('/');
		}


		var storymap = null;

		var params = parseQuerystring();
		var storymap_url = decodeURIComponent(params['url']);

		if(!!navigator.userAgent.match(/AppleWebKit\/.* Mobile\//)
		|| !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)
		|| !!navigator.userAgent.toLowerCase().match(/msie [789]/)) {
		    if(storymap_url.match(/^https?:\/\/www\.googledrive\.com\/host\//)) {
		        storymap_url = location.protocol+'//proxy.knightlab.com/'+storymap_url.split('://')[1];
		        trace('proxy, '+storymap_url);
		    }
		}

		var options = {
		    script_path: getScriptPath(/storymap(-min)?\.js/),
		    start_at_slide: 0
		};

		if(params.hasOwnProperty('start_at_slide')) {
		    options.start_at_slide = parseInt(params.start_at_slide);
		}

		function storymap_onload(d) {
		    trace('embed: storymap data loaded');
		    if (d && d.storymap) {
		        var font = "stock:default";
		        if(d.font_css) {
		            font = d.font_css;
		        }
		        if(font.indexOf("stock:") == 0) {
		            var font_name = font.split(':')[1];
		            var base_url = url_join(options.script_path,"../css/fonts");
		            font = url_join(base_url, "font." + font_name + ".css");
		        } else if(!font.match('^(http|https|//)')) {
		            font = url_join(options.script_path, font);
		        }
		        VCO.Load.css(font,function(){ trace('font loaded: ' + font);});
		        storymap = new VCO.StoryMap('storymap-embed', d, options, {title: on_storymap_title});
		    }
            var mapType = storymap.options.map_type;
            if(mapType && mapType.match('^zoomify.*')) {
                ga('send', 'event', 'StoryMapJS', 'zoomify', document.referrer)
            }
		}

		function on_storymap_title(e) {
			document.title = "StoryMapJS: " + e.title;
		};

		function storymap_getjson() {
		    if('withCredentials' in new XMLHttpRequest()) {
		        // Supports cross-domain requests
		        trace('embed: loading data via XMLHttpRequest');
		        VCO.getJSON(storymap_url, storymap_onload);
		    } else if(typeof XDomainRequest !== "undefined") {
		        // Use IE-specific "CORS" code with XDR
		        trace('embed: loading data via XDomainRequest');
		        var xdr = new XDomainRequest();
		        xdr.onload = function() {
		            storymap_onload(JSON.parse(xdr.responseText));
		        };
		        xdr.onerror = function() {
		            trace('embed: error loading data via XDomainRequest');
		        };
		        xdr.onprogress = function() {};
		        xdr.open("get", storymap_url);
		        xdr.send();
		    }
		}

		window.onload = function() {
		    if(storymap_url.match('\\.js$')) {
		        trace('embed: loading data via script injection');
		        var loaded = false;
		        var script = document.createElement("script");
		        script.type = "text/javascript";
		        script.src  = storymap_url;
		        script.onload = script.onreadystatechange = function() {
		            if(!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
		                loaded = true;
		                storymap_onload(storymap_json);
		            }
		        }

		        // document.head not standard before HTML5
		        var insertionPoint = document.head || document.getElementsByTagName('head').item(0) || document.documentElement.childNodes[0];
		        insertionPoint.appendChild(script);
		    } else {
		        storymap_getjson();
		    }
		}

		window.onresize = function(event) {
		    if(storymap) {
		        storymap.updateDisplay();
		    }
		}
		</script>
	</body>
</html>
